<template>
  <div class="solve">
    <section class="solve-bg">
      <img class="solve-bg-img" src="@/static/solve-bg_1.png">
      <div class="solve-bg-content">
        <h1 class="solve-bg-title">
          专注电动车充电领域与社区服务的
          <br/>
          智慧物联数字化运营解决方案
        </h1>
        <h3 class="solve-bg-subTitle">作为行业内为数不多的有多年运营经验，更懂客户的我们认为：</h3>
        <h2 class="solve-bg-des">你需要的不仅是一台充电设备</h2>
        <h2 class="solve-bg-des">更需要的是成熟的拓展运营经验+数字化运营平台</h2>
        <Consult class="solve-bg-btn" />
      </div>
    </section>
    <!-- 服务对象 -->
    <section class="box-serve-target" id="serveTarget">
      <h2 class="serve-target-title">服务对象</h2>
      <h3 class="serve-target-subTitle">用心服务上千家客户，与客户一同成长</h3>
      <div class="serve-target-icons">
        <div class="serve-target-icons-item" v-for="(val, index) in serveTargetList" :key="index">
          <img :src="require(`@/static/solve-serve-target-icon_${index}.png`)">
          <div class="serve-target-icons-title" v-html="val"></div>
        </div>
      </div>
    </section>
    <!-- 行业痛点 -->
    <section class="box-pain-point" id="painPoint">
      <h2 class="pain-poin-title">行业痛点</h2>
      <img class="pain-poin-img" src="@/static/solve-bg_2.png">
      <img class="pain-poin-img-mobile" src="@/static/solve-bg_2_mobile.png">
    </section>
    <!-- 方案介绍 -->
    <section class="box-plan-introduce" id="planIntroduce">
      <h2 class="plan-introduce-title">方案介绍</h2>
      <img class="plan-introduce-img" src="@/static/solve-bg_3.png">
      <img class="plan-introduce-img-mobile" src="@/static/solve-bg_3_mobile.png">
    </section>
    <!-- 解方案的list -->
    <section class="box-solve-list" id="solveList">
      <div class="box-solve-list-item" v-for="(item, key) in solveList" :key="key">
        <img v-show="!(key % 2) && !isMobile" :src="require(`@/static/solve-list_${key}.png`)" />
        <img v-show="isMobile" :src="require(`@/static/solve-list_${key}.png`)" />
        <div class="box-solve-list-content">
          <h2 class="box-solve-list-content-title">{{ item.title }}</h2>
          <div class="box-solve-list-content-des" v-for="(val, index) in item.des" :key="index">
            <span class="box-solve-list-content-icon"></span>
            <div class="box-solve-list-content-des-main-text" v-show="val.mainTitle">
              <div class="box-solve-list-content-des-mainText">{{ val.mainTitle }}</div>
              <span class="box-solve-list-content-des-text">{{ val.title }}</span>
            </div>
            <span v-show="!val.mainTitle" class="box-solve-list-content-des-text">{{ val }}</span>
          </div>
          <nuxt-link :to="{ path: `/product#operationPlatform` }" v-show="key == 0">
            <div class="box-solve-list-more">了解更多 →</div>
          </nuxt-link>
          <nuxt-link :to="{ path: `/product#chargeApplets` }" v-show="key == 1">
            <div class="box-solve-list-more">了解更多 →</div>
          </nuxt-link>
        </div>
        <img v-show="(key % 2) && !isMobile" :src="require(`@/static/solve-list_${key}.png`)" />
      </div>
    </section>
    <!-- OEM/定制服务 -->
    <section class="box-custom-service" id="customService">
      <h2 class="custom-service-title">OEM/定制服务</h2>
      <h3 class="custom-service-subTitle">拥有自有品牌和个性化需求？我们拥有强大的产品研发团队，你想要的，都能帮你实现</h3>
      <!-- 方案 -->
      <h2 class="custom-service-scheme-process-title">方案</h2>
      <div class="custom-service-scheme-content">
        <div class="custom-service-scheme-content-item" v-for="(val, index) in schemeList" :key="index">
          <img :src="require(`@/static/solve-scheme_${index}.png`)">
          <div class="custom-service-scheme-content-item-title" v-html="val"></div>
        </div>
      </div>
      <!-- 流程 -->
      <h2 class="custom-service-scheme-process-title">流程</h2>
      <div class="custom-service-process-content">
        <div class="custom-service-process-content-wrap" v-for="(val, index) in 13" :key="index">
          <div class="custom-service-process-content-item" v-if="!(index % 2)">
            <img :src="require(`@/static/solve-process_${parseInt(index/2)}.png`)">
            <div class="custom-service-process-content-item-title">{{ processList[parseInt(index/2)] }}</div>
          </div>
          <img class="custom-service-process-content-img" v-if="(index % 2) && !isMobile" src="@/static/arrow.png" />
        </div>
      </div>
      <div class="custom-service-btn">
        <Consult text="在线咨询" />
      </div>
    </section>
    <!-- 合作案例 -->
    <CooperationDemo id="cooperationDemo" />
  </div>
</template>

<script>
import { browserRedirect } from '@/components/mobileConsult.js'
export default {
  data () {
    return {
      serveTargetList: ['运营商', '代理商', '物业', '服务集成商', '施工商', '企事业单位', '学校', '出租房<br />个体商户'],
      solveList:[
        {
          title: '智能充电桩/充电插座提供稳定充电能力',
          des: [
            '多方安全保障，多种安装方式，多级功率支持，多重稳定连接，多类联网方案，多种计费模式',
            '设备工作状态实时查看，历史充电记录和功率曲线永久留存',
            '“DingBell” 设备离线/闲置/异常开启/功率过大等多种告警规则，实时通知'
          ]
        },
        {
          title: '行业领先的线上数字化运营体系',
          des: [
            {
              mainTitle: '用户充电小程序',
              title: '为百万用户提供服务，使用方便体验好，扫一扫即享即用'
            },
            {
              mainTitle: '运营商家小程序',
              title: '虽小但功能强大，在手机上轻松管理设备，查看收入和经营数据'
            },
            {
              mainTitle: '运营商家电脑后台',
              title: '更专注运营本身，更懂运营商，40+项功能给客户全面支撑'
            }
          ]
        },
        {
          title: '多种支付计费模式，提高收入快速回笼资金',
          des: [
            '真联网扫码刷卡，避免投币和离线卡收款难问题',
            '支持微信/支付宝，支持分功率多档位计费，充满自停/结束退款/小额支付/最低消费等10+项计费精细化配置项',
            '扫码单次支付+购买电子卡支付',
            '刷卡支持储值/套餐模式，支持在线充值/挂失/转赠',
            '针对不同站点场景，提供多种应对方案，支撑收入最大化'
          ]
        },
        {
          title: '资金监管，每分钱都确保安全到账',
          des: [
            '行业内率先接入资金监管平台，平台不碰资金，直接到商户账户',
            '实时结算，实时提现，不压资金',
            '资金日账单/月账单，收入支出清晰合理，对账方便',
            '强大的分成分账功能，可设置多个分成方和分成比例，帮助商户与伙伴合作共赢'
          ]
        },
        {
          title: '提供全方位运营能力，设备人员尽在掌握',
          des: [
            '电表抄录/电费结算全数字化，运营成本尽在掌控',
            '外勤签到/签退可视化，业务员和运维工人动态一目了然',
            '经营分析、盈亏计算、优化建议，叮叮运营助手帮助客户收益更多，付出更少',
            '“DingGo”系统使用工单记录巡检维修/配件更换运维工作，提升效率和服务质量',
            '精细化的员工权限，适合中大型运营商管理'
          ]
        },
        {
          title: '拓展速度和质量，是运营商成功的关键因素',
          des: [
            '从一个站点到多个站点，从一个城市到多个城市，需要依靠流程化和数字化管理',
            '设备使用率决定了投资回报率，科学的评估和判断，决定了投放后的收入高低',
            '“DingMeet“系统覆盖意向管理、自动化评估、合同管理、安装施工核算、商务人员管理全流程',
            '提供各类场景和场地的施工安装方案和辅导，配合DingPack配件系统，安装省力更省心'
          ]
        }
      ],
      schemeList: ['设备外壳定<br />制化设计', '对接公众号/定制<br />小程序', '与既有系统/App<br />集成对接', '专业诊断运营方案/<br />资源整合/专属服务', '其它个性化需求'],
      processList: ['前期沟通', '需求评估', '确定方案', '签订协议', '定制开发', '上线交付', '售后服务'],
      isMobile: false
    }
  },
  mounted () {
    this.isMobile = browserRedirect()
  },
  head() {
    return {
      title: '电动自行车充电桩解决方案,招商加盟代理-叮叮充电桩',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: '电动自行车解决方案,物业合作方式,招商加盟代理 '
        },
        {
          hid: 'description',
          name: 'description',
          content: '叮叮电动自行车充电桩提供各种场景的安装解决方案，物业合作方式，满足物业、运营商、单位、厂区等各种服务对象，支持OEM代工贴牌，让您更好的解决电动自行车充电问题。'
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .titleStyle
    width: 100%
    margin: 0 auto
    text-align: center
    margin: 60px auto 0px
    color: #282C32
    font-size: 32px
    font-weight: 400
  .subTitleStyle
    width: 100%
    margin: 0 auto
    text-align: center
    color: rgba(48, 54, 64, 0.7)
    font-size: 18px
  .solve
    width: 100%
    height: auto
    .solve-bg
      width: 1180px
      height: 464px
      margin: 0 auto
      position: relative
      text-align: center
      .solve-bg-img
        width: 100%
        position: relative
      .solve-bg-content
        width: 1180px
        position: absolute
        top: 48px
        .solve-bg-title
          width: 100%
          font-size: 40px
          color: #282C32
          line-height: 56px
          font-weight: bolder
        .solve-bg-subTitle
          width: 100%
          font-size: 18px
          color: #888888
          line-height: 30px
          margin: 16px 0
        .solve-bg-des
          width: 100%
          font-size: 20px
          color: #F57033
          line-height: 28px
          font-weight: bolder
        .solve-bg-btn
          margin-top: 26px
    .box-serve-target
      min-width: 1180px
      height: 392px
      background: #F8F8F8
      clear: both
      overflow: hidden
      .serve-target-title
        @extend .titleStyle
      .serve-target-subTitle
        @extend .subTitleStyle
        margin: 16px auto 40px
      .serve-target-icons
        width: 1180px
        margin: 0 auto
        display: flex
        flex-direction: row
        justify-content: space-between
        .serve-target-icons-item
          width: 80px
          text-align: center
          img
            width: 80px
            height: 80px
            margin-bottom: 6px
          .serve-target-icons-title
            color: #282C32
            font-size: 16px
            line-height: 22px
    .box-pain-point
      min-width: 1180px
      clear: both
      overflow: hidden
      text-align: center
      padding-bottom: 80px
      .pain-poin-title
        @extend .titleStyle
        margin-bottom: 48px
      .pain-poin-img
        width: 1180px
      .pain-poin-img-mobile
        display: none
    .box-plan-introduce
      min-width: 1180px
      background: #F8F8F8
      clear: both
      overflow: hidden
      text-align: center
      padding-bottom: 60px
      .plan-introduce-title
        @extend .titleStyle
        margin-bottom: 48px
      .plan-introduce-img
        width: 1180px
      .plan-introduce-img-mobile
        display: none
    .box-solve-list
        width: 1180px
        margin: 0 auto
        clear: both
        overflow: hidden
        padding-top: 80px
        .box-solve-list-item
          margin-bottom: 100px
          display: flex
          flex-direction: row
          justify-content: space-around
          img
            width: 480px
            height: 360px
          .box-solve-list-content
            width: 580px
            .box-solve-list-content-title
              color: #282C32
              font-size: 30px
              line-height: 48px
              margin-bottom: 32px
              font-weight: bolder
            .box-solve-list-content-des
              width: 580px
              margin-bottom: 16px
              display: flex
              flex-direction: row
              .box-solve-list-content-icon
                width: 12px
                height: 12px
                background: #DFE2E5
                border-radius: 2px
                margin-right: 8px
                margin-top: 6px
              .box-solve-list-content-des-main-text
                .box-solve-list-content-des-mainText
                  color: #282C32
                  font-size: 20px
                  line-height: 24px
                  margin-bottom: 8px
              .box-solve-list-content-des-text
                width: 560px
                color: rgba(48, 54, 64, 0.7)
                font-size: 16px
                line-height: 24px
            a
              text-decoration: none
            .box-solve-list-more
              color: #F57033
              font-size: 18px
              line-height: 25px
              margin-top: 16px
    .box-custom-service
      min-width: 1180px
      height: 934px
      background: #F8F8F8
      clear: both
      overflow: hidden
      .custom-service-title
        @extend .titleStyle
      .custom-service-subTitle
        @extend .subTitleStyle
        margin: 16px auto 80px
      .custom-service-scheme-process-title
        color: #282C32
        font-size: 30px
        line-height: 48px
        width: 100%
        text-align: center
        margin-bottom: 48px
      .custom-service-scheme-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        margin-bottom: 80px
        .custom-service-scheme-content-item
          text-align: center
          img
            width: 100px
            height: 100px
            margin-bottom: 16px
          .custom-service-scheme-content-item-title
            color: rgba(48, 54, 64, 0.7)
            font-size: 16px
            line-height: 24px
      .custom-service-process-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        margin-bottom: 48px
        .custom-service-process-content-wrap
          .custom-service-process-content-item
            text-align: center
            img
              width: 80px
              height: 80px
              margin-bottom: 8px
            .custom-service-process-content-item-title
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 24px
          .custom-service-process-content-img
            width: 13px
            height: 24px
            margin-top: 50px
      .custom-service-btn
        margin: 0 auto
        text-align: center
    .box-cooperation-case
      min-width: 1180px
      height: 990px
      clear: both
      overflow: hidden
      .cooperation-case-title
        @extend .titleStyle
        margin-bottom: 48px
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .titleStyle
    width: 100vw
    margin: 0 auto
    text-align: center
    margin: 24px auto 18px
    color: #282C32
    font-size: 28px
    font-weight: bolder
  .subTitleStyle
    width: 100vw
    margin: 0 auto
    text-align: center
    color: rgba(48, 54, 64, 0.7)
    font-size: 14px
  .solve
    width: 100vw
    height: auto
    .solve-bg
      width: 100vw
      position: relative
      text-align: center
      .solve-bg-img
        width: 100vw
        height: 60vw
        position: relative
      .solve-bg-content
        width: 100vw
        position: absolute
        top: 8px
        .solve-bg-title
          width: 100vw
          font-size: 18px
          color: #282C32
          line-height: 24px
          font-weight: bolder
          margin-top: 20px
        .solve-bg-subTitle
          width: 100vw
          font-size: 12px
          color: #888888
          line-height: 14px
          margin: 4px 0
        .solve-bg-des
          width: 100vw
          font-size: 14px
          color: #F57033
          line-height: 16px
          font-weight: bolder
        .solve-bg-btn
          margin-top: 20px
    .box-serve-target
      width: 100vw
      background: #F8F8F8
      clear: both
      overflow: hidden
      .serve-target-title
        @extend .titleStyle
      .serve-target-subTitle
        @extend .subTitleStyle
        margin: 0px auto 12px
      .serve-target-icons
        width: 90vw
        margin-left: 5vw
        margin-bottom: 5vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-between
        .serve-target-icons-item
          width: 22.5vw
          text-align: center
          margin-bottom: 2vw
          img
            width: 50px
            height: 50px
            margin-bottom: 4px
          .serve-target-icons-title
            color: #282C32
            font-size: 16px
            line-height: 22px
    .box-pain-point
      min-width: 100vw
      height: auto
      clear: both
      overflow: hidden
      text-align: center
      padding-bottom: 60px
      .pain-poin-title
        @extend .titleStyle
        margin-bottom: 18px
      .pain-poin-img-mobile
        width: 75vw
      .pain-poin-img
        display: none
    .box-plan-introduce
      min-width: 100vw
      height: auto
      clear: both
      overflow: hidden
      text-align: center
      background: #F8F8F8
      padding-bottom: 60px
      .plan-introduce-title
        @extend .titleStyle
        margin-bottom: 18px
      .plan-introduce-img-mobile
        width: 90vw
      .plan-introduce-img
        display: none
    .box-solve-list
        width: 100vw
        height: auto
        .box-solve-list-item-line
          border-bottom-width: 1px
          border-bottom-style: solid
          border-bottom-color: rgba(48, 54, 64, 0.7)
        .box-solve-list-item
          clear: both
          overflow: hidden
          margin-bottom: 20px
          margin-left: 5vw
          width: 90vw
          padding-bottom: 40px
          img
            width: 90vw
            height: 67.5vw
            margin-bottom: 20px
          .box-solve-list-content
            width: 90vw
            .box-solve-list-content-title
              color: #282C32
              font-size: 20px
              line-height: 24px
              margin-bottom: 12px
              font-weight: bolder
            .box-solve-list-content-des
              width: 90vw
              margin-bottom: 10px
              display: flex
              flex-direction: row
              .box-solve-list-content-icon
                width: 12px
                height: 12px
                background: #DFE2E5
                border-radius: 2px
                margin-right: 8px
                margin-top: 4px
              .box-solve-list-content-des-main-text
                .box-solve-list-content-des-mainText
                  color: #282C32
                  font-size: 18px
                  line-height: 20px
                  margin-bottom: 8px
              .box-solve-list-content-des-text
                width: 90vw
                color: rgba(48, 54, 64, 0.7)
                font-size: 14px
                line-height: 18px
            .box-solve-list-more
              color: #F57033
                font-size: 14px
                line-height: 20px
                margin-top: 10px
    .box-custom-service
      min-width: 100vw
      height: auto
      background: #F8F8F8
      clear: both
      overflow: hidden
      .custom-service-title
        @extend .titleStyle
      .custom-service-subTitle
        @extend .subTitleStyle
        margin: 0px auto 12px
        width: 90vw
      .custom-service-scheme-process-title
        color: #282C32
        font-size: 22px
        line-height: 24px
        width: 100%
        text-align: center
        margin-bottom: 24px
      .custom-service-scheme-content
        margin-left: 5vw
        width: 90vw
        margin-left: 5vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-around
        margin-bottom: 20px
        .custom-service-scheme-content-item
          width: 30vw
          text-align: center
          margin-bottom: 10px
          img
            width: 60px
            height: 60px
            margin-bottom: 6px
          .custom-service-scheme-content-item-title
            color: rgba(48, 54, 64, 0.7)
            font-size: 12px
            line-height: 16px
      .custom-service-process-content
        width: 90vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 24px
        .custom-service-process-content-wrap
          .custom-service-process-content-item
            text-align: center
            width: 30vw
            margin-bottom: 10px
            img
              width: 60px
              height: 60px
              margin-bottom: 8px
            .custom-service-process-content-item-title
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 24px
          .custom-service-process-content-img
            width: 12px
            margin-top: 36px
      .custom-service-btn
        margin: 0 auto 20px
        text-align: center
    .box-cooperation-case
      min-width: 1180px
      height: 990px
      clear: both
      overflow: hidden
      .cooperation-case-title
        @extend .titleStyle
        margin-bottom: 48px
</style>
